<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 线条发光效应实验</title>
		<style type="text/css">
			html {
				height: 100%;
				background: -webkit-linear-gradient(#813b97, #463c96);
				background: linear-gradient(#813b97, #463c96);
			}
			@-webkit-keyframes progress1 {
				0% {
					-webkit-transform: scalex(0);
					transform: scalex(0);
					opacity: 0.5;
				}
			}
			@keyframes progress1 {
				0% {
					-webkit-transform: scalex(0);
					transform: scalex(0);
					opacity: 0.5;
				}
			}
			@-webkit-keyframes progress2 {
				0% {
					-webkit-transform: scale(0.3, 0.8) translatez(0);
					transform: scale(0.3, 0.8) translatez(0);
					opacity: 0.1;
				}
				100% {
					-webkit-transform: scale(1, 1) translatex(200px) translatez(0);
					transform: scale(1, 1) translatex(200px) translatez(0);
					opacity: 1;
				}
			}
			@keyframes progress2 {
				0% {
					-webkit-transform: scale(0.3, 0.8) translatez(0);
					transform: scale(0.3, 0.8) translatez(0);
					opacity: 0.1;
				}
				100% {
					-webkit-transform: scale(1, 1) translatex(200px) translatez(0);
					transform: scale(1, 1) translatex(200px) translatez(0);
					opacity: 1;
				}
			}
			.line {
				position: absolute;
				top: 50%;
				width: 300px;
				left: 50%;
				margin-left: -150px;
				height: 3px;
				background: rgba(255, 255, 255, 0.1);
			}
			.line:before {
				-webkit-animation: progress1 4s infinite;
				animation: progress1 4s infinite;
				-webkit-transform-origin: 0 0;
				-ms-transform-origin: 0 0;
				transform-origin: 0 0;
				content: "";
				display: block;
				width: 200px;
				height: 100%;
				background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.9));
				background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.9));
			}
			.line:after {
				content: "";
				position: absolute;
				-webkit-animation: progress2 4s infinite;
				animation: progress2 4s infinite;
				-webkit-transform-origin: 90% 50%;
				-ms-transform-origin: 90% 50%;
				transform-origin: 90% 50%;
				margin-left: -24px;
				top: -9px;
				width: 30px;
				height: 21px;
				border-radius: 10%;
				background: rgba(210, 189, 255, 0.55);
				-webkit-filter: blur(8px);
				filter: blur(8px);
				box-shadow: 0 0 10px 6px rgba(210, 189, 255, 0.4), -20px 0 15px 4px rgba(210, 189, 255, 0.3), -40px 0 15px 2px rgba(210, 189, 255, 0.2), -60px 0 10px 1px rgba(210, 189, 255, 0.1), -80px 0 10px 1px rgba(210, 189, 255, 0.05);
			}
		</style>
	</head>
	<body>
		<div class="line"></div>
	</body>
</html>
